<template>
  <div class="box-header">
        <span class="header-logo">
          <img width="100%" height="100%" src="../../../assets/img/login-logo.png">
        </span>
    <span class="header-text">
          <a href="javascript:;" @click="pcRegister" v-if="type === 'login'">免费注册</a>
          <a href="javascript:;" @click="pcLogin" v-else>我有账号直接登录</a>
        </span>
    <span class="header-close">
      <a href="javascript:;" class="close-btn" @click="closeBox"><img width="100%" height="100%" src="../../../assets/img/pc-close.png"></a>
    </span>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      type: {
        type: String
      }
    },
    methods: {
      pcRegister() {
        this.eventBus.$emit('pcRegister', true)
      },
      pcLogin() {
        this.eventBus.$emit('pcLogin', true)
      },
      closeBox() {
        this.eventBus.$emit('closeBox', true)
      }
    }
  }
</script>

<style type="text/css">
  .box-header {
    position: relative;
    width: 100%;
    height: 72px;
  }

  .box-header .header-logo {
    position: absolute;
    display: block;
    top: 32px;
    left: 32px;
    width: 177px;
    height: 40px;
  }

  .box-header .header-text {
    position: absolute;
    display: block;
    top: 42px;
    right: 33px;
    font-size: 24px;
    color: #666;
  }

  .box-header .header-close {
    position: absolute;
    display: block;
    top: 10px;
    right: 10px;
  }

  .box-header .header-close .close-btn {
    display: block;
    width: 20px;
    height: 20px;
  }
</style>
